<template>
	<div>
		<el-form :inline="true" class="flex-warp-container">
			<el-form-item class="flex-row-container">
				<el-button
					type="warning"
					icon="el-icon-download"
					size="medium"
					:loading="exportBtnLoading"
					@click="handleExportExcel"
				>
					{{ $t('common.export') }}
				</el-button>
			</el-form-item>
		</el-form>
		<el-table
			v-loading="loading"
			ref="elTable"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:max-height="tableHeight"
			:data="tableData"
			v-bind="$attrs"
			v-on="$listeners"
			:header-cell-style="getRowClass"
			highlight-current-row
			show-summary
			:summary-method="(val) => handleRow(val, subSummary, totalSummary)"
		>
			<el-table-column
				v-for="(item, index) in newCol"
				:key="'column_' + index"
				:prop="newCol[index].prop"
				:align="item.alignCenter"
				:label="item.label"
				:min-width="item.minWidth"
				:fixed="item.isFixed"
				:sortable="item.isSortColumn"
				:show-overflow-tooltip="item.isShowTip"
			>
				<template slot="header">
					<span v-if="item.itemTipContent">
						{{ item.label }}
						<el-tooltip
							class="item"
							effect="dark"
							:content="item.itemTipContent"
							placement="top-start"
						>
							<i class="el-icon-question"></i>
						</el-tooltip>
					</span>
					<span v-else>
						{{ item.label }}
					</span>
				</template>
				<template slot-scope="{ row, $index }">
					<template v-if="item.slot === 'serialNumber'">
						{{ $index + 1 }}
					</template>
					<Copy
						v-if="item.solt === 'copySolt'"
						:title="row[newCol[index].prop]"
						:copy="copy"
					>
						{{ row[newCol[index].prop] }}
					</Copy>
					<div v-if="item.solt === 'numberSolt'">
						<span
							:style="handleNumberColor(row[columns[index].prop])"
						>
							{{
								handleNumber(
									'USDT',
									row[columns[index].prop],
									2,
									true,
									true
								)
							}}
						</span>
					</div>
					<div v-if="item.solt === 'noColorNumberSolt'">
						<span>
							{{
								handleNumber(
									'USDT',
									row[columns[index].prop],
								)
							}}
						</span>
					</div>
					<div v-if="item.solt === 'percentage'">
						<span>
							{{( row[columns[index].prop] || 0 ) + '%' }}
						</span>
					</div>
					<div v-if="item.solt === 'defaultSolt'">
						<span>
							{{ row[columns[index].prop] || '-' }}
						</span>
					</div>
					<div v-if="item.solt === 'orderStatusSlot'">
						<span>
							{{ filterOrderStatus(row[columns[index].prop]) }}
						</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			background
			class="dialog-pagination"
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</div>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
import { getColumns } from './columns'
export default {
  mixins: [list, summaryList],
  props: {
	row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
	  columns: getColumns(),
      loading: false,
      exportBtnLoading: false,
      tableHeight: 480,
      otherDependenComponents: [],
      tableData: [],
      newCol: [],
      subSummary: {},
      totalSummary: {},
	  orderStatusArr: [
			{
				code: '1',
				description: '待审核'
			},
			{
				code: '6',
				description: '审核拒绝'
			},
		]
    }
  },
  created() {
    this.newCol = getColumns()
  },
  methods: {
	filterOrderStatus(code) {
		const item = this.orderStatusArr.find(
			(item) => item.code === String(code)
		)
		return item ? item.description : '-'
	},
	handleExportExcel() {
      const params = {
		cycleStartDate: this.row.cycleStartDate,
		cycleEndDate: this.row.cycleEndDate,
		proxyId: this.row.proxyId,
		accountType: 2,
	  }
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'reportCreditBillReconciliationInvalidExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
	loadData() {
      this.loading = true
	  const params = {
			cycleStartDate: this.row.cycleStartDate,
            cycleEndDate: this.row.cycleEndDate,
            proxyId: this.row.proxyId,
			accountType: 2,
	  }
	  this.$api
		.reportCreditBillReconciliationInvalidListPage(this.getParams(params))
		.then((res) => {
			if (res?.code === 200) {
				const { record, totalRecord, summary } = res.data || {}
				this.total = totalRecord
				this.tableData = Array.isArray(record)
					? Object.freeze(record)
					: []
				this.subSummary = summary

				
				if (Object.keys(this.totalSummary).length === 0) {
					this.totalSummary = summary
				}
			}
		
			this.loading = false
		})
		.catch(() => {
			this.loading = false
		})

		this.$api.reportCreditBillReconciliationInvalidSummary(params)
		.then((res) => {
			if(res.code === 200) {
				this.totalSummary = res.data || {}
			}
		})
    }
  }
}
</script>

<style lang="scss" scoped>

.dialog-pagination{
	text-align: center;
	margin-top: 15px;
}
</style>
